<script>
    let user = {
        name: 'LZUGIS',
        birth: '2022-01-01'
    }
    const msgs = [
        'Message 1',
        'Message 2',
        'Message 3',
        'Message 4',
        'Message 5'
    ]
</script>

<div class="avatar">
    <img src="./imgs/avatar.png">
    <div class="text">
        {user.name}<br>
        {user.birth}
    </div>
</div>
<ul class="mui-table-view">
    {#each msgs as msg}
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">{msg}</a>
        </li>
    {/each}
</ul>
<style lang="scss">
.avatar {
  height: 8rem;
  background-color: var(--active-color);
  color: white;
  --height: 3rem;
  img, .text {
    height: var(--height);
    margin: 2.5rem 1.5rem 2.5rem 1.5rem;
    float: left;
  }
  .text{
    height: var(--height);
    margin-left: 0;
    font-size: 1.2rem;
  }
}
</style>